<template>
	<d2-container>
		<!-- 搜索 -->
		<template slot="header" class="query-area">
			<el-form ref="queryForm" :model="queryForm" class="header-area" label-width="90px" style="height:auto">
				<el-row>
					<el-col :span="5">
						<el-form-item label="销售渠道" prop="saleChannel">
							<el-select v-model="queryForm.saleChannel" placeholder="请选择" style="width: 100%;">
								<el-option label="微信小程序" value="0"></el-option>
								<el-option label="商家/供应商" value="1"></el-option>
								<el-option label="直播平台" value="2"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					
					<el-col :span="5">
						<el-form-item label="销售门店" prop="shopId">
							<el-select v-model="queryForm.shopId" filterable placeholder="请输入名字或选择" style="width: 100%;">
								<el-option label="不限" value=""></el-option>
								<el-option :label="item.shopName" :value="item.id" v-for="item of allShopList" :key="item.id"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					
					<el-col :span="6">
						<el-form-item label="销售时间" prop="time" label-width="100px">
							<el-date-picker
								v-model="time"
								type="datetimerange"
								:picker-options="pickerOptions"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="timestamp"
								align="right"
								:default-time="['00:00:00', '23:59:59']"
							></el-date-picker>
						</el-form-item>
					</el-col>
					
					<el-col :span="5">
						<div class="search-submit">
							<el-button type="primary" size="medium" @click="submitForm">开始统计</el-button>
							<el-button size="medium" @click="resetForm">重置</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</template>
		
		<div class="summary-data">
			<template v-if="isShowData">
				<div class="data-summary">
					<div class="data-summary-item">
						<div>订单总数：</div>
						<div class="data-summary-text">{{orderSummary}}<span>单</span></div>
					</div>
					<div class="data-summary-item">
						<div>订单总金额：</div>
						<div class="data-summary-text"><span>¥</span>{{priceSummary}}</div>
					</div>
					<div class="data-summary-item">
						<div>用券总金额：</div>
						<div class="data-summary-text">{{couponSummary}}<span>元券</span></div>
					</div>
					<div class="data-summary-item">
						<div>退款总金额：</div>
						<div class="data-summary-text"><span>¥</span>{{refundSummary}}</div>
					</div>
				</div>
				
				<el-table :data="dataList" border stripe style="width: auto;">
					<el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
					
					<el-table-column prop="shopName" label="销售店铺" width="250"></el-table-column>
					<el-table-column prop="saleChannel" label="销售渠道" width="160" align="center">
						<template slot-scope="scope">
							<el-tag size="small" v-if="saleChannel == 2">直播平台</el-tag>
							<el-tag size="small" type="warning" v-else-if="saleChannel == 1">商家/供应商</el-tag>
							<el-tag size="small" type="success" v-else>微信小程序</el-tag>
						</template>
					</el-table-column>
					
					<el-table-column prop="orderStatus" label="订单状态" width="160" align="center">
						<template slot-scope="scope">
							<el-tag type="info" size="small" v-if="scope.row.afterSalesStatus == 4">交易关闭（售后退款）</el-tag>
 							<el-tag type="warning" size="small" v-else-if="scope.row.orderStatus === 2 && scope.row.afterSalesStatus == 0">已付款，待提货</el-tag>
							<el-tag type="success" size="small" v-else-if="scope.row.orderStatus == 4">已完成</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="isMemberPay" label="是否用券支付" width="150" align="center">
						<template slot-scope="scope">
							<el-tag size="small" v-if="scope.row.isMemberPay">是</el-tag>
							<span v-else>-</span>
						</template>
					</el-table-column>
					
					<el-table-column prop="orderCount" label="订单总数" width="110" align="center"></el-table-column>
					<el-table-column prop="payableAmount" label="订单总金额(元)" :formatter="forMoney" width="150" align="center"></el-table-column>
					<el-table-column prop="couponAmount" label="用券总金额" :formatter="forMoney" width="150" align="center"></el-table-column>
				</el-table>
			</template>
		</div>
	</d2-container>
</template>

<script>
	import { getOrderSummaryData } from '@api/order/order'
	import { getShopList } from '@api/shop/shop'
	import dayjs from 'dayjs'
	export default {
		data() {
			return {
				queryForm: {
					saleChannel: '', //销售渠道 0 小程序 1 商家/供应商 2 直播平台
					shopId: '',
					payType: '', //支付方式 6.志愿者积分兑换 7.小程序微信支付 8.建行支付
					startDate: '', //开始时间
					endDate: '', //结束时间
				},
				time: [],
				saleChannel: 0,
				allShopList: [],
				
				pickerOptions: {
					shortcuts: [{
							text: '最近一周',
							onClick(picker) {
								const end = new Date()
								const start = new Date()
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
								picker.$emit('pick', [start, end])
							}
						},
						{
							text: '最近一个月',
							onClick(picker) {
								const end = new Date()
								const start = new Date()
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
								picker.$emit('pick', [start, end])
							}
						},
						{
							text: '最近三个月',
							onClick(picker) {
								const end = new Date()
								const start = new Date()
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
								picker.$emit('pick', [start, end])
							}
						},
						{
							text: '最近六个月',
							onClick(picker) {
								const end = new Date()
								const start = new Date()
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
								picker.$emit('pick', [start, end])
							}
						}
					]
				},
				
				isShowData: false,
				dataList: [],
				noContent: false,
				
				saleChannelList1: [], //展示用：小程序
				saleChannelList2: [], //展示用：商家/供应商
				saleChannelList3: [], //展示用：直播平台
				orderSummary: 0,
				priceSummary: 0,
				couponSummary: 0,
				refundSummary: 0,
			}
		},
		methods: {
			getData() {
				let params = {
					saleChannel: this.queryForm.saleChannel,
					shopId: this.queryForm.shopId,
					beginTime: this.queryForm.startDate,
					endTime: this.queryForm.endDate,
				}
				getOrderSummaryData(params)
					.then(res => {
						this.dataList = res.data;
						this.saleChannel = this.queryForm.saleChannel;
						this.computeSummary();
						
						this.noContent = res.data.length === 0 ? true : false;
						this.isShowData = true;
					})
			},
			filterData(arr) { //整理显示的数据
				let list = this.common.objDeepCopy(arr);
				list.sort((a, b) => {
					return a.isMemberPay - b.isMemberPay;
				});
				let newList = []; //按状态分组
				
				for(let i = 0; i < 4; i++) {
					newList.push({
						id: i + 1,
						orderStatus: i + 1,
						data: []
					});
					let orderStatus = i + 1;
					
					list.forEach(item => {
						if(item.orderStatus == orderStatus) {
							newList[i].data.push(item)
						}
					});
				}
					
				let dealList = []; //整理后数据（过滤无数据的状态）
				newList.forEach(item => {
					if(item.data.length) {
						dealList.push(item);
					}
				});
				return dealList;
			},
			computeSummary() { //计算总数
				let orderSummary = 0;
				let priceSummary = 0;
				let couponSummary = 0;
				let refundSummary = 0;
				this.dataList.forEach(item => {
					orderSummary = orderSummary + item.orderCount;
					priceSummary = priceSummary + item.payableAmount;
					if(item.isMemberPay) {
						couponSummary = couponSummary + item.couponAmount;
					}
					if(item.afterSalesStatus == 4) {
						refundSummary = refundSummary + item.payableAmount;
					}
				});
				
				this.orderSummary = orderSummary;
				this.priceSummary = priceSummary.toFixed(2);
				this.couponSummary = couponSummary.toFixed(2);
				this.refundSummary = refundSummary.toFixed(2);
			},
			forMoney(row, column) {
				let money = '';
				if (column.property == 'payableAmount') {
					money = row.orderAmount == null ? '0.00' : row.orderAmount.toFixed(2);
				}
				if (column.property == 'couponAmount') {
					money = row.isMemberPay == 0 || row.couponAmount == null || row.couponAmount == 0 ? '-' : row.couponAmount + '元券';
				}
				return money;
			},
			
			submitForm() {
				if(this.queryForm.saleChannel === '') {
					this.$message.error('请选择销售渠道！');
					return;
				}
				if(this.time.length == 0) {
					this.$message.error('请选择销售时间！');
					return;
				}
				// if(this.queryForm.shopId === '') {
				// 	this.$message.error('请选择销售店铺！');
				// 	return;
				// }
				this.queryForm.startDate = dayjs(this.time[0]).format('YYYY-MM-DD HH:mm:ss');
				this.queryForm.endDate = dayjs(this.time[1]).format('YYYY-MM-DD HH:mm:ss');
				this.getData();
			},
			resetForm() {
				this.$refs.queryForm.resetFields();
				this.queryForm.startDate = '';
				this.queryForm.endDate = '';
				this.time = [];
				this.isShowData = false;
				this.noContent = false;
			},
			
			getAllShopData() { //获取全部店铺列表
				getShopList({
					pageNum: 1,
					pageSize: 9999
				})
					.then(res => {
						this.allShopList = res.data.content;
					})
			}
		},
		mounted() {
			this.getAllShopData();
		}
	}
</script>

<style lang="scss" scoped>
	.data-summary {
		align-items: center;
		display: flex;
		padding: 10px 0 20px 30px;
		
		.data-summary-item {
			flex: 0 0 auto;
			font-size: 18px;
			align-items: baseline;
			display: flex;
			margin-right: 50px;
			&:last-child {
				margin-right: 0;
			}
			
			.data-summary-text {
				font-size: 26px;
				color: #ff5642;
				span {
					font-size: 18px;
				}
			}
		}
	}
	.summary-data-box {
		width: 500px;
	}
</style>